<template>
  <div class="relative">
    <yu-button class="absolute -top-16 right-0" @click="sendPopupFn">发送私信</yu-button>
    <ul>
      <li
          v-for="msgPrivate in store.msgPrivateData.msgs"
          :key="msgPrivate.lastMsgId"
          class="border-b-1 pb-2 border-b-dotted pt-2 pl-2 yu-one-hover-bgColor flex relative prv"
          @click="jumpPrivateDetail(msgPrivate.fromUser.userId, msgPrivate.fromUser.nickname)"
      >
        <div class="w-15 h-15 mr-2 relative">
          <img style="width: 100%; height: 100%;" @click.stop="jumpHomepage(msgPrivate.fromUser.userId)" :src="msgPrivate.fromUser.avatarUrl" alt="">
          <span
              v-if="msgPrivate.newMsgCount"
              class="absolute inline-block w-4 h-4 -top-1 -right-1 font-bold bg-red-400 border-gray-50 border-2 text-xs rounded-full flex justify-center"
          >
              {{ msgPrivate.newMsgCount }}
            </span>
        </div>
        <div class="flex-1 mr-35">
          <div class="flex items-center">
            <span class="yu-textColor-hover" @click.stop="jumpHomepage(msgPrivate.fromUser.userId)">{{ msgPrivate?.fromUser?.nickname }}</span>
            <div class="ml-2 w-4 h-4" v-if="msgPrivate.fromUser.avatarDetail">
              <img style="width: 100%; height: 100%;" :src="msgPrivate.fromUser.avatarDetail.identityIconUrl" alt="">
            </div>
          </div>
          <p class="context" v-if="msgPrivate.lastMsg.type !== 16">{{ msgPrivate.lastMsg.msg }}</p>
          <p class="context" v-if="msgPrivate.lastMsg.type === 16">分享图片</p>
        </div>
        <div class="w-35 absolute right-0 text-xs ">
          <p class="flex items-center">
            <span>{{ timestampToYMD(msgPrivate.lastMsgTime, 's') }}</span>
            <i class="i-mdi-clock-time-eight-outline inline-block ml-1"/>
          </p>
          <span class="yu-textColor-hover del hidden">删除</span>
        </div>
      </li>
    </ul>
    <div class="flex justify-around">
      <van-button @click="getMsgPrivateFn()" round :loading="loading" type="success" loading-text="加载中...">加载数据
      </van-button>
    </div>
  </div>
  <share-popup
    ref="sendPopup"
    :repeatType="true"
    :sharePlayerInfo="sharePlayerInfo"
    :isShareType="false"
  />
</template>

<script setup>
import YuButton from '@/components/YuButton/index.vue'
import {reactive, ref, toRefs} from "vue";
import {useStore} from "@/store/index";
import {useRouter} from "vue-router";
import { timestampToYMD } from "@/utils/index";

const store = useStore()
const router = useRouter()
const loading = ref(false)
const sendPopup = ref()
const data = reactive({
  num: 1,
  msgPrivateData: {},
  sharePlayerInfo: {
    shareType: 'text'
  }
})
const {num, sharePlayerInfo} = toRefs(data)

// 请求数据
const getMsgPrivateFn = async (num = null, type = null) => {
  loading.value = true
  const code = await store.getMsgPrivate(num === 0 ? num : data.num, type)
  if (code === 200) {
    loading.value = false
    if (num !== 0) data.num += 1
  }
}
getMsgPrivateFn(0, 'msg')

// 跳转到聊天页面
const jumpPrivateDetail = (id, name) => {
  router.push({
    path: 'private_detail',
    query: {
      id,
      name
    }
  })
}

// 跳转到主页
const jumpHomepage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}

// 发送私信弹窗
const sendPopupFn = () => {
  sendPopup.value.yuPopupA()
}
</script>

<style scoped lang="scss">
.van-button {
  background-color: v-bind('store.theme.secondaryBgColor');
  border-color: v-bind('store.theme.secondaryBgColor');
  transition: .3s;

  &:hover {
    background-color: v-bind('store.theme.bgColor');
    border-color: v-bind('store.theme.bgColor');
  }
}
.context {
  display: -webkit-box;
  -webkit-box-orient: vertical; /*设置方向*/
  -webkit-line-clamp: 1; /*设置超过为省略号的行数*/
  overflow: hidden;
}
.prv {
  &:hover {
    .del {
      display: inline-block;
    }
  }
}
</style>
